import React, { useMemo, memo, FC, Ref, useCallback, useState } from 'react';
import InfoCardSkeleton from '@/components/info-card/InfoCardSkeleton';
import Empty from '@/components/empty/Empty';
import InfoCard from '@/components/info-card/InfoCard';
import styles from './minerItemElement.module.less';
import SvgIcon from '@/components/svg-icon/SvgIcon';
import { AiOutlineClose, AiOutlineCopy, AiOutlineEdit } from 'react-icons/all';
import formatHash from '@/utils/format/formatHash';
import { MinerPageModel } from '@/service/miner';
import { Miner } from '@/types/miner';
import { Button, Dropdown } from 'antd';
import GroupDropDown from '@/page-compoennt/miner/moveToGroupAndMoreHandle/GroupDropDown';
import { GroupPageModel } from '@/service/group';
import { DownOutlined } from '@ant-design/icons';
import MoreHandleDropDown from '@/page-compoennt/miner/moveToGroupAndMoreHandle/MoreHandleDropDown';
import CopyAble from '@/components/copy-able/CopyAble';
import CardStatusBlock from '@/components/card-status-block/CardStatusBlock';
import MinerNameEdit from '@/components/miner-name-edit/MinerNameEdit';
import CoinIcon from '@/components/coin-icon/CoinIcon';

interface IMinerItemsElementProps {
  isValidating: boolean;
  minerModel: MinerPageModel | undefined;
  checkedMinerMap: React.MutableRefObject<Map<string, Miner>>;
  checkMinerCard: (miner: Miner, e: React.MouseEvent<HTMLElement>) => void;
  toggle: (flag: boolean) => void;
  openedCardInfoId: string;
  setOpenedCardInfoId: React.Dispatch<React.SetStateAction<string>>;
  groupModel: GroupPageModel | undefined;
  mutateMiner: () => void;
  openNameEditModal: (name: string, mac: string) => void;
}

const HandleButton: FC<any> = (props) => {
  return (
    <Button
      size="small"
      {...props}
      style={{
        backgroundColor: '#EDF2F9',
        border: 'none',
        color: '#283E59',
        borderColor: '#283E59',
        ...props.style,
      }}
    ></Button>
  );
};

const MinerItemsElement: FC<IMinerItemsElementProps> = (props) => {
  const {
    isValidating,
    minerModel,
    checkedMinerMap,
    checkMinerCard,
    toggle,
    openedCardInfoId,
    setOpenedCardInfoId,
    groupModel,
    mutateMiner,
    openNameEditModal,
  } = props;

  const openSingleMiner = (miner: Miner, e: React.MouseEvent<HTMLElement>) => {
    toggle(false);
    e.stopPropagation();
    e.preventDefault();
    setOpenedCardInfoId((mac) => {
      return mac === miner.mac ? '' : miner.mac;
    });
  };

  if (isValidating) {
    return (
      <div>
        {Array.from(
          new Array(Math.max(1, minerModel?.minerList.length || 1)).keys(),
        ).map((i) => {
          return <InfoCardSkeleton key={`${i}-skeleton`} />;
        })}
      </div>
    );
  }
  if (!minerModel) {
    return null;
  }
  if (minerModel.minerList.length == 0) {
    return <Empty />;
  }
  return (
    <div>
      {minerModel.minerList.map((miner) => {
        return (
          <div key={miner.mac} className={styles.minerItem}>
            <InfoCard
              status={miner.status}
              onClick={(e: any) => openSingleMiner(miner, e)}
            >
              <div className={`flex ai-center w-100 h-100 ${styles.minerCard}`}>
                <div
                  className={`${styles.check} ${
                    checkedMinerMap.current.get(miner.mac) ? styles.active : ''
                  }`}
                  onClick={(e) => checkMinerCard(miner, e)}
                >
                  <SvgIcon symbol="icon-gouxuanzhong" />
                </div>

                <div className={`flex flex-1 flex-col jc-between`}>
                  <div className={`flex`}>
                    <div className={`flex ai-center flex-1 `}>
                      <MinerNameEdit
                        onClick={() => openNameEditModal(miner.name, miner.mac)}
                        name={<span className={styles.name}>{miner.name}</span>}
                      />
                    </div>
                    {miner.status === 4 ? null : <CoinIcon coin={miner.coin} />}

                    {miner.status === 4 ? null : (
                      <div className={` ${styles.hash}`}>
                        {miner.hashFormat}
                      </div>
                    )}
                  </div>
                  <div className={`flex ai-center ${styles.line2}`}>
                    <div className="flex-1">
                      <CopyAble text={miner.ip} />
                    </div>
                    {miner.status === 4 ? null : (
                      <CardStatusBlock cards={miner.cards} />
                    )}
                  </div>
                  {miner.status === 4 ? (
                    <div className={styles.offlineTip}>
                      <SvgIcon symbol="icon-lixian" />
                      <span>矿机已离线</span>
                    </div>
                  ) : null}
                </div>
              </div>
            </InfoCard>
            {openedCardInfoId == miner.mac ? (
              <div className={styles.minerItemOpenWrap}>
                <div
                  className={`flex flex-wrap jc-between ${styles.minerCardInfo}`}
                >
                  {miner.cards.map((card, index) => {
                    return (
                      <div
                        key={`${card.temp}-${index}-${card.hash}`}
                        className={`flex ai-center  ${styles.cardInfo}`}
                      >
                        <span className={styles.index}>{index}</span>
                        <span
                          className={`${styles.tempOrHash} ${
                            styles[card.tempStatus]
                          }`}
                        >
                          {`${card.temp}℃`}
                        </span>
                        <span
                          className={`${styles.tempOrHash} ${
                            styles[card.hashStatus]
                          }`}
                        >
                          {card.hashFormat}
                        </span>
                      </div>
                    );
                  })}
                </div>
                <div
                  id="minerItemHandleWrap"
                  className={`flex ai-center jc-end ${styles.minerItemHandleWrap}`}
                >
                  <HandleButton style={{ marginRight: '10px' }}>
                    显卡管理
                  </HandleButton>
                  <div>
                    <GroupDropDown
                      groupModel={groupModel}
                      miners={[miner.mac]}
                      containerId="minerItemHandleWrap"
                      mutateMiner={mutateMiner}
                    >
                      <HandleButton style={{ marginRight: '10px' }}>
                        移动至
                        <DownOutlined />
                      </HandleButton>
                    </GroupDropDown>
                  </div>
                  <div>
                    <MoreHandleDropDown
                      mutateMiner={mutateMiner}
                      mid={miner.mid}
                      miners={[miner.mac]}
                    >
                      <HandleButton>
                        更多操作
                        <DownOutlined />
                      </HandleButton>
                    </MoreHandleDropDown>
                  </div>
                  <AiOutlineClose
                    onClick={() => setOpenedCardInfoId('')}
                    style={{
                      color: '#6E84A3',
                      fontSize: '20px',
                      marginLeft: '12px',
                    }}
                  />
                </div>
              </div>
            ) : null}
          </div>
        );
      })}
    </div>
  );
};
export default MinerItemsElement;
